<template>
  <view class="card-info">
    <view class="top-info">
      <view class="top-info-a">营收概况</view>
      <view style="flex:1"></view>
      <view :class="selectIndex == 1 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(1)">近七天
      </view>
      <view :class="selectIndex == 2 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(2)">近一月
      </view>
      <view :class="selectIndex == 3 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(3)">近三月
      </view>
      <view :class="selectIndex == 4 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(4)">近半年
      </view>
    </view>
    <view class="stat-one-info">
      <view style="flex:1">
        <view class="stat-one-word">
          <view class="stat-one-word-a">{{ this.info.revenueSumTwo }}</view>
          <view class="stat-one-word-b">万元</view>
        </view>
        <view class="stat-one-word-c">旅游综合收入</view>
      </view>
      <img src="@/static/image/back1.png"/>
    </view>
    <echarts :eChartId="'eChartOne'" ref="echartsRef"></echarts>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: 1,
      info: {}
    };
  },
  mounted() {
    let that = this
    setTimeout(function (){
      that.initData()
    }, 500)
  },
  methods: {
    initData() {
      this.$api.boardRevenue({dateType: this.selectIndex}).then(res => {
        this.info = res.data;
        this.initEcharts()
      });
    },
    initEcharts() {
      let that = this
      let dataArr = []
      for (let i = 0; i < this.info.revenueGroup.length; i++) {
        let obj = this.info.revenueGroup[i]
        dataArr.push({
          value: parseFloat(obj.dataBoardPriceTwo, 10),
          name: obj.dataBoardType
        },)
      }
      this.option = {
        title: {
          text: "总营收\r\n" + this.info.revenueSum,  //标题文本
          show: true,  //是否显示标题组件
          left: '65%',
          top: 'center',
          textStyle: { //图例文字的样式
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)",
        },
        color: [
          "#6699FF",
          "#29CCA9",
          "#FF9D0C",
          "#45C2E0",
        ],
        legend: {
          orient: 'vertical',
          icon: "circle",
          y: 'center',
          x: 'left',
          textStyle: {
            color: '#3c3c3c',
            fontSize: 12,
            height: 12,
            lineHeight: 12,
            padding: [0, -2, -4, -4],
          },
          formatter: function(labelName) {
            for (let i = 0; i < dataArr.length; i++) {
              const { name, value } = dataArr[i];
              if (dataArr[i].name == labelName) {
                return `${name}   ${value}`
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['25%', '50%'],
            center: ['75%', '50%'],
            label: {
              show: false
            },
            data: dataArr
          },
        ]
      }
      this.$refs.echartsRef.changeChart(this.option)
    },
    selectChange(index) {
      this.selectIndex = index
      this.initData()
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../index.scss';

.stat-one-info {
  display: flex;
  padding-top: 30rpx;

  .stat-one-word {
    display: flex;
    align-items: center;
    height: 75rpx;

    .stat-one-word-a {
      font-size: 54rpx;
      font-weight: 800;
      color: #333333;
    }

    .stat-one-word-b {
      font-size: 20rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .stat-one-word-c {
    font-size: 20rpx;
    font-weight: bold;
    color: #A8A8A8;
    height: 50rpx;
    line-height: 50rpx;
  }

  img {
    height: 120rpx;
    width: 300rpx;
  }
}

</style>
